import React from 'react';
import './ConfirmModal.css';

interface ConfirmModalProps {
  isOpen: boolean;
  title: string;
  message: string;
  onCancel: () => void;
  onConfirm: () => void;
}

const ConfirmModal: React.FC<ConfirmModalProps> = ({
  isOpen,
  title,
  message,
  onCancel,
  onConfirm,
}) => {
  if (!isOpen) return null;

  // 处理背景点击关闭
  const handleOverlayClick = (e: React.MouseEvent) => {
    if (e.target === e.currentTarget) {
      onCancel();
    }
  };

  // 处理ESC键关闭
  React.useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        onCancel();
      }
    };

    document.addEventListener('keydown', handleKeyDown);
    return () => document.removeEventListener('keydown', handleKeyDown);
  }, [onCancel]);

  return (
    <div className="confirm-modal-overlay" onClick={handleOverlayClick}>
      <div className="confirm-modal-content">
        <div className="confirm-modal-header">
          <h3>{title}</h3>
          <button 
            className="confirm-modal-close" 
            onClick={onCancel}
            aria-label="关闭"
          >
            &times;
          </button>
        </div>
        
        <div className="confirm-modal-body">
          <p className="confirm-message">{message}</p>
        </div>
        
        <div className="confirm-modal-footer">
          <button 
            className="btn-confirm-cancel" 
            onClick={onCancel}
          >
            取消
          </button>
          <button 
            className="btn-confirm-delete" 
            onClick={onConfirm}
          >
            确认删除
          </button>
        </div>
      </div>
    </div>
  );
};

export default ConfirmModal;